分散型ストレージサービスのWeb3.Storageにプログラムからアップロードを行なってみる
この前の記事で分散型ストレージサービスのWeb3.Storageの概要と、Webサービスを使ってファイルのアップロードを試しました。
今回はWebサービスではなく、前回取得して使用しなかったAPIトークンを使ってWeb3.Storageにファイルをアップロードしたりしてみます。
今回使用するのはこちら、
です。
クライアントライブラリは、アップロードをコンテンツアドレス可能アーカイブ（CAR）に自動的にパックして、Web3.Storageサービスにアップロードします。 このアーカイブは、データの暗号化ハッシュから派生したコンテンツ識別子（CID）のプレフィックスが付いたブロックとしてデータを保存します。
そして、ファイルのCIDを使用してファイルを取得できます。
使ってみる
次のソフトウェアの最新の安定バージョンをインストールすることをお勧めしますが、少なくとも次のものが必要です。
- NPM 7.0.0
- Node.js 14.0.0
- Webpack 5.0.0
インストール
mkdir web3-storage-quickstart cd web3-storage-quickstart
ディレクトリを作成し、そこへ移動します。
npm install web3.storage
その後、上記コマンドを使ってインストールします。
コンストラクタ
APIトークンを使ってコンストラクタを作成します。
import { Web3Storage } from 'web3.storage';
const client = new Web3Storage({ token: <<apiToken>> });
※ apiTokenの箇所を自身のものに変更
ファイルをアップロード
ファイルをアップロードして保存するには、putメソッドを使用します
<clientObject>.put(file[], { options })
パラメーター
- file[]
- アップロードされるファイルのコレクション
- {options}
- Web3.Storageのオプションとアップロードされるファイルのメタデータを定義するプロパティがあるオブジェクト
- name
- アップロードされたコンテンツアーカイブに任意の名前を付ける
- maxRetries
- 失敗した場合に再試行する回数を指定
- wrapWithDirectory
- Web3.Storageに追加されたときにファイルをIPFSディレクトリーにラップするかどうかを制御。
- デフォルトはtrue
- onRootCidReady
- データのルートCIDはデータがWeb3.Storageにアップロードされる前に生成されます。アップロードが完了する前にユーザーにCIDを表示したい場合は、CID文字列を受け取るonRootCidReady関数に渡します
- onStoredChunk
- onStoredChunkコールバックを渡すことで、進捗状況の更新を表示することができます
- name
- Web3.Storageのオプションとアップロードされるファイルのメタデータを定義するプロパティがあるオブジェクト
実際に動かしてみる
パラメータの動作確認も含めて実践してみます。
file[]のみ使用
ファイルが格納されているディレクトリを指定してputを行います。
import { getFilesFromPath } from 'web3.storage';
const files = await getFilesFromPath('./files');
const rootCid = await client.put(files);
console.log(rootCid)
このようにcidが出力されました。
Webサイトの方を確認してみると、きちんとアップロードされていました。
nameオプション
※ filesオブジェクトは先ほどと同じ
const rootCid = await client.put(files, { name: 'sample files' });
指定した名前で保存されますね。
wrapWithDirectory
$ tree files files ├── sub │ └── EuVimtuUYAEL_3l.jpeg ├── web3_storage-logo.png └── フォース.png 1 directory, 3 files
const rootCid = await client.put(files, { name: 'wrap files' });
console.log(rootCid)
このような構成のディレクトリで、filesをwrapWithDirectory=trueで全てアップロードすると、
CIDはfilesサブディレクトリを含むディレクトリのCIDを返します。
ではfalseにした場合はどういう挙動になるかというと、
const rootCid = await client.put(files, { name: 'no wrap files', wrapWithDirectory:false });
console.log(rootCid)
CIDはfilesサブディレクトリを含まず、filesに入っているコンテンツを直接示すCIDを返します。
onRootCidReady
onRootCidReadyは関数で、putのオプションに渡すとアップロード完了前にcidがわかります。
const onRootCidReady = rootCid => console.log('root cid:', rootCid);
const cid = await client.put(files, { onRootCidReady });
console.log('upload後動くroot cid:', cid)
onStoredChunk
onStoredChunkは関数で、進行状況の更新を表示することもできます。
データの各チャンクがアップロードされた後に呼び出され、チャンクのサイズ（バイト単位）がパラメーターとして渡されます。
const onStoredChunk = chunkSize => console.log(`stored chunk of ${chunkSize} bytes`);
const cid = await client.put(files, { onStoredChunk });
上記のように分割されたチャンクのサイズが表示されました。
次回以降はアップロードしたファイルを取得するなどを行いたいと思います
関連
- (comming soon)Web3.Storageにアップロードされたファイルをプログラムから取得する
